<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>修改用户密码</title>
    <header th:replace="header::html"/>
</head>
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="#">首页</a>
            <a href="#">个人中心</a>
            <a><cite>修改密码</cite></a>
        </span>
    </div>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <input type="hidden" id="userId" name="id" />
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="username" disabled="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="oldpassword" class="layui-form-label">
                        <span class="x-red">*</span>旧密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="oldpassword" name="oldPassword" lay-verify="oldpassword" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="newpassword" class="layui-form-label">
                        <span class="x-red">*</span>新密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="newpassword" name="newPassword" lay-verify="newpassword" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">6到16个字符</div></div>
                <div class="layui-form-item">
                    <label for="repassword" class="layui-form-label">
                        <span class="x-red">*</span>确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" id="repassword" lay-verify="repassword" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-filter="edit" lay-submit="" permission="sys:user:edit">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        // 显示用户名
        $("#username").val(localStorage.getItem("username"));
        $("#userId").val(localStorage.getItem("userId"));

        layui.use(['form', 'layer'], function () {
            var form = layui.form,
                layer = layui.layer;

            // 权限校验
            checkPermissoin();

            // 自定义验证规则
            form.verify({
                oldpassword: [/(.+){6,12}$/, '密码必须6到12位'],
                newpassword: [/(.+){6,12}$/, '密码必须6到12位'],
                repassword: function (value) {
                    if ($('#newpassword').val() != value) {
                        return '两次密码不一致';
                    }
                }
            });

            // 监听提交
            form.on('submit(edit)', function (data) {
                // 发异步请求，修改用户密码
                $.ajax({
                    url: '/user/password',
                    type: 'PUT',
                    data: data.field,
                    dataType: 'json',
                    beforeSend: function() {
                        layer.load();
                    },
                    success: function (res) {
                        if (res.httpCode != 200 || res.retCode != 0) {
                            layer.alert(res.retMsg);
                        } else {
                            layer.alert("修改成功", {icon: 6});
                        }
                    }
                });
                layer.closeAll();
                return false;
            });
        });
    </script>
</body>
</html>